/* SimpleEditableSelect 组件的样式文件 */

// 定义颜色变量
$hover-bg-color: #f0f8ff;
$delete-hover-bg-color: #ffebee;
$border-radius: 8px;
$padding-sm: 8px;

$transition-duration: 0.2s;

/* 覆盖 Ant Design Select 下拉选项的默认样式 */
.customSelectDropdown {
  border-radius: 6px !important;

  :global(.ant-select-item-option-selected),
  :global(.ant-select-item-option-active),
  :global(.ant-select-item-option:hover),
  :global(.ant-select-item-option-selected:hover),
  :global(.ant-select-item-option-active:hover) {
    background-color: transparent !important;
  }
  :global(.ant-select-item-option) {
    padding: 5px 0px !important;
    padding-right: 14px !important;
  }
}

/* 选项容器样式 */
.optionContainer {
  display: flex;
  height: 28px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border-radius: $border-radius;
  padding: $padding-sm;
  margin: 0px 4px 0px 2px;
  transition: background-color $transition-duration ease;
  background-color: transparent;

  &:hover {
    background-color: $hover-bg-color;

    .deleteIcon {
      opacity: 1;
    }
  }

  &.deleteHovered {
    background-color: $delete-hover-bg-color;
  }
}

.optionLabel {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: $padding-sm;
}

.deleteIcon {
  flex-shrink: 0;
  transition: opacity $transition-duration ease;
  opacity: 0;

  &.visible {
    opacity: 1;
  }
}

/* 添加选项区域样式 */
.addSection {
  padding: $padding-sm;
}

.addInputContainer {
  display: flex;
  align-items: center;
  gap: $padding-sm;
}

.addButton {
  width: 100%;
  text-align: left;
}
